<template>
  <div class="addSet">
    <el-dialog
      v-model="visibleDia"
      title="添加机组"
      width="70%"
      :close-on-click-modal="false"
      @close="reset"
    >
      <div class="container">
        <el-row class="line border">
          <el-col :span="span[0]">
            <label>所属电厂</label>
            <CdnSelect
              :options="plantList"
              v-model="operParam.plant.code"
              :model="model"
            />
          </el-col>
          <el-col :span="span[0]">
            <label>机组名称</label>
            <CdnInput v-model="operParam.plant.unitName" />
          </el-col>
          <el-col :span="span[0]">
            <label>年度</label>
            <CdnPicker
              v-model="operParam.plant.periods"
              type="year"
            />
          </el-col>
          <el-col :span="span[0]">
            <label>水丰度</label>
            <CdnSelect
              :options="fsd"
              v-model="operParam.plant.yearType"
            />
          </el-col>
        </el-row>
        <el-row class="line border">
          <el-col
            :span="span[2]"
            class="title"
          >
            <label>发电类型</label>
          </el-col>
          <el-col :span="span[1]">
            <label>发电类型一级</label>
            <CdnSelect
              :options="fdlx1"
              v-model="operParam.type.generator1"
            />
          </el-col>
          <el-col :span="span[1]">
            <label>发电类型二级</label>
            <CdnSelect
              :options="fdlx2"
              v-model="operParam.type.generator2"
            />
          </el-col>
          <el-col :span="span[1]">
            <label>发电类型三级</label>
            <CdnSelect
              :options="fdlx3"
              v-model="operParam.type.generator3"
            />
          </el-col>
        </el-row>
        <el-row class="line border">
          <el-col
            :span="span[2]"
            class="title"
          >
            <label>基本参数</label>
          </el-col>
          <el-col :span="span[1]">
            <label>机组容量（千瓦）</label>
            <CdnInput
              v-model="operParam.param.capacity"
              type="number"
            />
          </el-col>
          <el-col :span="span[1]">
            <label>投运时间</label>
            <CdnPicker v-model="operParam.param.runDate" />
          </el-col>
          <el-col :span="span[1]">
            <label>年度检修时长（小时）</label>
            <CdnInput
              v-model="operParam.param.fixHours"
              type="number"
            />
          </el-col>
        </el-row>
        <el-row
          class="line border"
          v-for="(m,i) of operParam.month"
          :key="i"
        >
          <el-col
            :span="span[2]"
            class="title"
          >
            <label>{{ getMonth(i+1) }}月出力</label>
          </el-col>
          <el-col :span="span[1]">
            <label>预想出力</label>
            <CdnInput
              v-model.number="m.expect"
              type="number"
            />
          </el-col>
          <el-col :span="span[1]">
            <label>平均出力</label>
            <CdnInput
              v-model.number="m.average"
              type="number"
            />
          </el-col>
          <el-col :span="span[1]">
            <label>强迫出力</label>
            <CdnInput
              v-model.number="m.forced"
              type="number"
            />
          </el-col>
        </el-row>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button
            type="primary"
            @click="ok"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, toRefs, watch, inject, reactive } from 'vue'
import CdnSelect from '@/views/stagePower/CdnSelect';
import CdnInput from '@/views/stagePower/CdnInput';
import CdnPicker from '@/views/stagePower/CdnPicker';
import { copyAttr, getMonth, showMsg } from '@/utils/frequency.js';
import { addUnit, updateUnit } from '@/services/stagePower.js';
const visibleDia = inject('visibleDia');
const operFlag = inject('operFlag');

defineProps({
  plantList: {
    type: Array,
    default: []
  }, model: {
    type: Object,
    default: {}
  }
});
const emit = defineEmits(['queryUnitList', 'resetSelectedRow']);

const ok = async () => {
  if (operFlag.value == 0) {
    addUnitInfo();
  } else {
    updateUnitInfo();
  }
}

// 添加机组
const addUnitInfo = async () => {
  // 校验必填选项
  if (!operParam.plant.code) {

    return showMsg('请选择电厂');
  } else if (!operParam.plant.periods) {

    return showMsg('请选择年份');
  } else if (!operParam.plant.yearType) {

    return showMsg('请选择水丰度');
  }
  const res = await addUnit(operParam);
  if (!res.respStatus) {
    return showMsg(res.respData);
  }
  showMsg(res.respMessage, 'success');
  reset();
}

// 修改机组信息
const updateUnitInfo = async () => {

  const { respStatus, respMessage, respData } = await updateUnit(operParam);
  if (!respStatus) return showMsg(respMessage);
  emit('queryUnitList');
  reset();
}

const span = [6, 8, 24];
const data = inject('selectedRow');

const operParam = reactive({
  plant: null,
  type: null,
  param: null,
  month: null
})

const resetOperParam = () => {
  const plant = {
    code: null,
    unitName: null,
    yearType: null,
    periods: null,
  };
  const type = {
    generator1: null,
    generator2: null,
    generator3: null,
  };
  const param = {
    capacity: null,
    runDate: null,
    fixHours: null,
  };

  const month12 = [];
  for (let i = 0; i < 12; i++) month12.push({
    expect: null, // 期望出力
    average: null, // 平均出力
    forced: null, // 强迫出力
  });
  operParam.plant = plant;
  operParam.type = type;
  operParam.param = param;
  operParam.month = month12;

}
resetOperParam();

const fsd = [
  {
    key: '1',
    value: '丰水年',
  },
  {
    key: '2',
    value: '平水年',
  },
  {
    key: '3',
    value: '枯水年',
  }
]
const fdlx1 = [
  {
    key: '水电',
    value: '水电'
  }
]
const fdlx2 = ref([]);
const fdlx3 = ref([]);
const fdlx2Value = [
  {
    key: '常规水电',
    value: '常规水电'
  },
  {
    key: '蓄能水电',
    value: '蓄能水电'
  },
  {
    key: '一般水电',
    value: '一般水电'
  }
];
const fdlx3Value = [
  {
    key: '定速机组',
    value: '定速机组'
  }
];

const reset = () => {
  visibleDia.value = false;
  operFlag.value = 0;
  resetOperParam();
}

watch(operFlag, () => {
  // 修改操作
  if (operFlag.value == 1) {
    if (data.type.generator2 != null) {
      fdlx2.value = fdlx2Value;
    }
    if (data.type.generator3 != null) {
      fdlx3.value = fdlx3Value;
    }

    copyAttr(operParam, data);
  } if (operFlag.value == 0) { // 新增操作
    fdlx2.value = [];
    fdlx3.value = [];
    resetOperParam();
  }
})

watch(() => operParam.type.generator1, (cur) => {
  if (cur == null) {
    operParam.type.generator2 = null;
  } else {
    fdlx2.value = fdlx2Value;
  }
})
watch(() => operParam.type.generator2, (cur) => {
  if (cur == null) {
    operParam.type.generator3 = null;
  } else {
    fdlx3.value = fdlx3Value;
  }

})

</script>

<style lang="scss" scoped>
.addSet {
  .container {
    height: 400px;
    overflow: auto;
    .border {
      border: solid 1px #ccc;
      border-radius: 5px;
    }
    .line {
      padding: 5px;
      margin: 5px;
      label {
        padding-right: 10px;
        width: 150px;
        text-align: right;
      }
      .el-col {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .title {
        display: flex;
        justify-content: center;
      }
      .title {
        padding: 15px;
      }
    }
  }
}
</style>